<template>
	<BaseChart :options="options" />
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useNodeData } from "../../composables";
import { BaseChart } from "../../shared";
import type { HQNodeData } from "../type";
import type { ECOption } from "@/plugins/echarts";

const { config } = useNodeData<HQNodeData["config"]>({ depth: 0, color: "#f7ca6f" });

const options = computed<ECOption>(() => {
	return {
		title: {
			top: "middle",
			left: "center",
			textStyle: { fontSize: "16px", color: "#fbf9f9" }
		},
		series: [
			{
				type: "liquidFill",
				radius: "100%",
				shape: "container",
				color: [config.color],
				show: false,
				data: [config.depth / 100],
				outline: {
					borderDistance: 0,
					itemStyle: {
						borderWidth: 4,
						borderColor: "#ff5d00"
					}
				},
				backgroundStyle: {
					color: "#ffefdf"
				},
				label: {
					fontSize: 0,
					color: "#606266"
				}
			}
		] as any,
		tooltip: { show: false }
	};
});
</script>

<style lang="scss" scoped></style>
